<template>
  <div id="ordermap">
    <div class="useaddr">
      <div class="useaddrH">
        <p>收货人信息</p>
        <button @click="shownewaddr">使用新地址</button>
      </div>

      <ul class="addrinfo">
        <li v-for="item in addrlist" :key="item.id">
          <input type="radio" name="addr" />
          <span>{{item.name}}</span>
          <span>{{item.adress}}</span>
          <span>手机:{{item.phone}}</span>
          <strong v-if="item.isshow" class="moren">默认地址</strong>
          <div class="addrinforight">
            <em v-if="!item.isshow">设置默认地址</em>
            <strong>修改</strong>
            <span>删除</span>
          </div>
        </li>
      </ul>
      <div class="newaddr" v-if="newaddrshow">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货人姓名:" prop="name" class="name">
            <el-input v-model="ruleForm.name" class="nameinput" placeholder="输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="所在地区:" prop="region" id="address">
            <div class="address">
              <select name class="setaddr">
                <option value>北京</option>
              </select>
              <select name class="setaddr">
                <option value>北京</option>
              </select>
              <select name class="setaddr">
                <option value>北京</option>
              </select>
            </div>
          </el-form-item>
          <el-form-item label="详细地址:" prop="xiangaddr" class="xiangaddr" placeholder="输入收货人的详细地址">
            <el-input v-model="ruleForm.addr" class="addrnput"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="phone" class="phone" placeholder="输入收货人的手机号">
            <el-input v-model="ruleForm.phone" class="phoneinput"></el-input>
            或者固定电话
            <el-input v-model="ruleForm.addr" class="phoneinput1"></el-input>-
            <el-input v-model="ruleForm.addr" class="phoneinput2"></el-input>
          </el-form-item>
          <button class="newaddrbtn">确认并设为默认地址</button>
        </el-form>
      </div>
    </div>
    <div class="shopinfo">
      <table class="orders" style="margin-bottom: 20px" v-for="(v,index) in list" :key="index">
        <tr class="orders-1">
          <th>{{v.title}}</th>
          <th>{{v.standard}}</th>
          <th>{{v.prices}}</th>
          <th>{{v.numbers}}</th>
          <th>{{v.money}}</th>
        </tr>
        <tr class="orders-2" v-for="(vs,index) in v.one" :key="index">
          <td class="orderimg">
            <img :src="vs.image" />
            <span>{{vs.title_1}}</span>
          </td>

          <td>{{vs.standard_1}}</td>
          <td>
            <span>￥</span>
            <span>{{vs.prices_1}}</span>
          </td>
          <td>
            <button
              @click="deCreament(v.id,vs.id,vs.num,vs.prices_1,vs.money_1)"
              class="btn"
            >{{vs.decreament}}</button>
            <span>{{vs.num}}</span>
            <button
              @click="inCreament(v.id,vs.id,vs.num,vs.prices_1,vs.money_1)"
              class="btn"
            >{{vs.increament}}</button>
          </td>

          <td>
            <span>￥{{vs.money_1}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="7" class="orders-3">
            <span>运费：</span>
            <strong>￥{{v.yunfei}}</strong>
            <span>商品金额:</span>
            <strong>￥{{v.moneys}}</strong>
            <span>商家合计</span>
            <strong>￥{{v.costmoney}}</strong>
          </td>
        </tr>
      </table>
      <div class="fapiaoInfo">
        <h3>开票信息</h3>
        <div>
          <input type="radio" name="fapiao" value="no" />不需要
          <input type="radio" name="fapiao" value="geren" />个人
          <input type="radio" name="fapiao" value="danwei" />单位
        </div>
        <div class="fapiaonumber">
          <label>
            发票抬头:
            <input type="text" />
            <span>* 请认真填写后核对发票信息</span>
          </label>
        </div>
      </div>
      <div class="dingdanbeizhu">
        <h3>添加订单备注</h3>
        <input type="text" placeholder="限45个字,请填写有关商品、支付、发票等信息" />
      </div>
    </div>
    <div class="nextcome">
      <h3>次日达·礼拜五专享</h3>
      <span>选择送达时间:</span>
      <strong>2020年02月11日{{time}}</strong>
      <i @click="xiugaitime">点击修改</i>
      <div class="timednuan">
        <ul>
          <li v-for="item in timelist" :key="item.id">{{item.time}}</li>
        </ul>
        <div class="timebtn">
          <button>取消</button>
          <button class="yesbtn">确定</button>
        </div>
      </div>
    </div>
    <div class="orderFooter">
      <div class="shifu">
        <span>实付金额：</span>
        <strong>￥{{allmoney}}</strong>
      </div>
      <div class="jifen">
        <span>订单完成后可获得积分:</span>
        <strong>300积分</strong>
      </div>
      <router-link to="/shop/pay">提交</router-link>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      newaddrshow:false,
      ruleForm: {
        name: "",
        region: "",
        xiangaddr: "",
        phone: "",
        
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        xiangaddr: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            message: "请输入正确的手机号",
            min: 11,
            max: 11,
            trigger: "blur"
          }
        ]
      },
      time: 0,
      allmoney: 0,
      addrlist: [
        {
          id: 0,
          name: "小可爱",
          adress: "北京市 天安门楼下 拱门门口",
          phone: "18838979821",
          isshow: true
        },
        {
          id: 1,
          name: "小可爱",
          adress: "北京市 天安门楼下 拱门门口",
          phone: "18838979821",
          isshow: false
        }
      ],
      list: [
        {
          id: 0,
          title: "爱果果水果店",
          yunfei: 5,
          standard: "规格",
          prices: "单价",
          numbers: "数量",
          money: "金额",
          operation: "操作",
          moneys: 0,
          costmoney: 0,
          one: [
            {
              id: 0,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 70,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 70,
              operation_1: "删除"
            },
            {
              id: 1,
              image: require("../assets/images/banner-13.png"),
              title_1: "云南蒙自石榴8个装",
              standard_1: "8个装",
              prices_1: 100,
              decreament: "-",
              num: 1,
              increament: "+",
              money_1: 100,
              operation_1: "删除"
            }
          ]
        }
      ],
      timelist: [
        {
          id: 0,
          time: "10:00-13:00"
        },
        {
          id: 1,
          time: "11:00-14:00"
        },
        {
          id: 2,
          time: "12:00-15:00"
        },
        {
          id: 3,
          time: "13:00-16:00"
        },
        {
          id: 4,
          time: "14:00-17:00"
        },
        {
          id: 5,
          time: "15:00-18:00"
        },
        {
          id: 6,
          time: "16:00-19:00"
        },
        {
          id: 7,
          time: "17:00-20:00"
        },
        {
          id: 8,
          time: "18:00-21:00"
        },
        {
          id: 9,
          time: "19:00-22:00"
        }
      ]
    };
  },
  created() {
    // console.log(this.CheckA);
    for (const i of this.list) {
      for (const j of i.one) {
        i.moneys += Number(j.money_1);
      }

      i.costmoney = i.yunfei + i.moneys;
      this.allmoney += i.costmoney;
      window.console.log(i.costmoney);
    }
    const time1 = new Date();

    this.time = time1;
  },
  methods: {
    // bus接受穿过来的值

    //做加法
    inCreament(index, id, number, prices) {
      this.allmoney = 0;
      this.costmoney = 0;
      this.list[index].one[id].num = number + 1;
      this.list[index].one[id].money_1 = number * prices + prices;

      //得出总金额
      for (const i of this.list) {
        i.moneys = 0;

        for (const j of i.one) {
          i.moneys += j.money_1;
        }

        i.costmoney = i.yunfei + i.moneys;
        this.allmoney += i.costmoney;
      }
    },
    //做减法
    deCreament(index, id, number, prices) {
      this.allmoney = 0;
      this.costmoney = 0;
      if (number <= 1) {
        this.list[index].one[id].num = 1;
        this.list[index].one[id].money_1 = prices;
      } else {
        this.list[index].one[id].num = number - 1;
        this.list[index].one[id].money_1 = number * prices - prices;
        for (const i of this.list) {
          i.moneys = 0;
          for (const j of i.one) {
            window.console.log(j.money_1);
            // console.log(this.moneys);
            i.moneys += j.money_1;
          }
          this.allmoney += i.moneys;
          this.costmoney = i.yunfei + i.moneys;
        }
      }
    },
    //删除
    Del() {
      window.console.log("删除");
    },
    handleChange(value) {
      window.console.log(value);
    },

    //    全选
    cheeckAll() {
      this.Is = !this.Is;
    },
    // 修改时间
    xiugaitime() {
      $(".nextcome i").click(function() {
        window.console.log("++++++++++++");
      });
    },
    // 显示新地址
    shownewaddr(){
      this.newaddrshow = !this.newaddrshow;
    },
  }
};
</script>
<style scoped>
#ordermap {
  width: 80%;
  margin: auto;
}
.useaddr {
  width: 100%;
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
}
.useaddrH {
  width: 100%;
  font-size: 16px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
}
.useaddrH p {
  margin: 0px;
}
.useaddrH button {
  color: #fff;
  border: none;
  background: #f08200;
}
.addrinfo {
  list-style: none;
  width: 100%;
  padding: 0px;
  margin-bottom: 20px;
  text-align: left;
}
.addrinfo li {
  overflow: hidden;
  font-size: 16px;
  line-height: 35px;
  margin-bottom: 10px;
  background: #f4fff2;
}
.addrinfo span {
  margin-right: 3px;
}
.addrinforight {
  width: 30%;
  color: #498e3d;
  float: right;
  text-align: right;
}
.addrinforight em {
  font-style: normal;
  color: #f1a965;
}

.addrinforight strong {
  margin-left: 10%;
  margin-right: 10%;
  font-weight: inherit;
}
.moren {
  font-size: 14px;
  color: #c7cdc6;
  font-weight: inherit;
}
/* table 得样式 */

.shopinfo {
  width: 100%;
}
.orders {
  width: 100%;
  margin: auto;
  text-align: center;
  border: 1px solid #e9e9e9;
  border-bottom: none;
  border-spacing: 0px;
}
.orders tr td {
  border-bottom: 1px solid #e9e9e9;
}
.orders-1 {
  width: 100%;
  height: 30px;
  /*border: 1px solid red;*/
  background: #f2f2f2;
}

.orders-1 th {
  text-align: center;
  /*border: 1px solid red;*/
}

.orders-1 th:nth-of-type(1) {
  width: 20%;
  text-align: left;
  padding-left: 20px;
}

.orders-2 {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #e9e9e9;
}

.orders-2 td:nth-of-type(1) {
  width: 100%;
  height: 100px;
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.orders-2 td:nth-of-type(1) img {
  width: 60px;
  height: 60px;

  border: 1px solid #999;
  /*margin-right: 10px;*/
}

.orders-2 td:nth-of-type(1) span {
  padding: 10px;
  /*border: 1px solid red;*/
}
.btn {
  line-height: 25px;
}
.orders-2 td:nth-of-type(4) span {
  padding: 7px 20px 5px 20px;
  line-height: 25px;
  border: 1px solid #d3d3d3;
}

.orders-2 td:nth-of-type(4) button {
  font-size: 17px;
  font-weight: bold;
}

.orders-2 td:nth-of-type(6) {
  color: #3e8f3e;
}

.orders-3 {
  width: 66.66667%;
  height: 70px;
  margin: auto;
  text-align: right;
  line-height: 70px;
}

.orders-3 span:nth-of-type(1) {
  padding: 5px;
  font-size: 15px;
  /*border: 1px solid red;*/
}

.orders-3 strong {
  padding: 10px 20px 10px 20px;
  color: red;
  font-size: 15px;
}

.el-input__inner .el-input-number {
  width: 60px;
  height: 40px;
  padding: 0px;
}
.fapiaoInfo {
  width: 100%;
  text-align: left;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.fapiaonumber {
  font-size: 16px;
  line-height: 25px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.fapiaonumber input {
  width: 30%;
  height: 25px;
}
.fapiaonumber span {
  margin-left: 2%;
}
.dingdanbeizhu {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.dingdanbeizhu input {
  width: 35%;
  height: 25px;
  margin-bottom: 20px;
  padding-left: 10px;
}
.nextcome {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 1px solid #d3d3d3;
}
.timednuan {
  width: 60%;
  border: 1px solid #d3d3d3;
  margin-bottom: 20px;
  background: #f8fff7;
}
.timednuan ul {
  list-style: none;
  padding: 0px;
  padding: 15px 0px;
  margin: 0px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.timednuan ul li {
  width: 18%;
  text-align: center;
  line-height: 25px;
  border: 1px solid #d3d3d3;
}
.timebtn {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 20px;
}
.timebtn button {
  width: 40%;
  font-size: 16px;
  color: #fff;
  border: none;
  line-height: 30px;
  background: #999;
}
.timebtn .yesbtn {
  background: #f08200;
}
.orderFooter {
  width: 100%;
  font-size: 18px;
  line-height: 35px;
  text-align: right;
}
.shifu strong {
  color: #ff5757;
}
.jifen strong {
  color: #f18c24;
}
.orderFooter a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: 10%;
  font-size: 16px;
  color: #fff;
  margin-top: 15px;
  margin-bottom: 20px;
  line-height: 30px;
  background: #f18c24;
  border: none;
}
/* 新地址 */
.newaddr {
  width: 50%;
   margin-bottom: 20px;
}
.name {
  width: 100%;
  text-align: left;
}
.nameinput {
  width: 60%;
}
.address {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.setaddr {
  display: inline-block;
  width: 30%;
  margin: 0px;
  line-height: 40px;
  border: none;
  height: 40px;
  border: 1px solid #999;
}
.xiangaddr {
  width: 100%;
  text-align: left;
}
.addrnput {
  width: 100%;
}
.phone {
  width: 100%;
  text-align: left;
}
.phoneinput {
  width: 30%;
}
.phoneinput1{
   width: 15%;
}
.phoneinput2{
  width:36%;
}
.newaddrbtn{
  display: inline-block;
  width: 25%;
  line-height: 40px;
  font-size: 14px;
  color:#fff;
  background:#f08200;
  border:none;
 
}
</style>